<template>
    <div>
        <div class="control_margin">
            <el-form :model="controlList">
                    <el-form-item label="操作项:" label-width="60px">
                        <el-cascader
                            ref="modecascader"
                            v-model="value"
                            :key="keyC"
                            :options="itemlistData"
                            :props="modecasProps"
                            :placeholder="controlList.valueName"
                            :disabled="linkGroupTitle == '编辑' ? true :false"
                            @change="itemChange">
                        </el-cascader>
                    </el-form-item>
                    <div class="link_numput"  v-if="controlList.valueName != '请选择' && controlList.devType != 0">
                        <el-form-item label="执行值:" label-width="60px" >
                            <el-input v-model="value3" :onKeyUp="value3=value3.replace(/[^0-9a-fA-F-X-x]/g,'')" :placeholder="((name=='空' || name== '自定义')?'自定义':controlList.idName)+':'+controlList.value" @change="getValue" autocomplete="off"></el-input>
                        </el-form-item>
                        <div class="linkcontrol_help" v-if="this.dictionary.length != 0">
                            <!-- <i class="el-icon-question" title="字典帮助" @click="linkDictionary = true"></i> -->
                            <el-button type="primary" @click="linkDictionary = true">帮助</el-button>
                        </div>
                        
                    </div>
                    <div class="link_name" v-if="(this.type == 'start' || this.type == 'end') && controlList.valueName != '请选择'">
                        <el-form-item label="名称:" label-width="60px">
                            <el-input v-model="controlList.name" placeholder="先选择操作项，后修改名称" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <div class="linkson_save">
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="save(0)">取 消</el-button>
                        <el-button type="primary" @click="save(1)">确 定</el-button>
                    </span>
                </div>
        </div>
        <el-dialog
            title="帮助字典"
            :visible.sync="linkDictionary"
            width="30%"
            class="dialog_link"
            :append-to-body="true">
                <el-form :model="controlList">
                    <el-form-item label="建议执行功能:" label-width="110px" >
                        <el-select v-model="value2" @change="getSelect" placeholder="自定义">
                            <el-option
                            v-for="item in dictionary"
                            :key="item.value"
                            :label="item.label+item.value"
                            :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            
        </el-dialog>
    </div>
</template>
<script>
import dictionaryData from "../../../../static/dictionary.json"
export default {
    name:'Cascadercontrol',
    props: ['controlList','itemlistData','linkGroupTitle','type'],
    data() {
        return {
            value:'',
            value2:'',
            value3:'',
            name1:'',
            name2:'',
            keyC:0,
            addr:0,
            name:'空',
            linkDictionary:false,
            modecasProps: {
                multiple: false, //多选
                value: 'value',
                label: 'label',
                addr: 'addr',
                // 懒加载
                lazy: true, // 必须为true
                lazyLoad:this.lazyLoad,
            },
            dictionary:[]//字典
            
        }
    },
    created() {
        if(this.controlList.moduleType != ""){
            // 字典更新
            for(var i = 0; i < dictionaryData.length; i++){
                if(this.controlList.devType == dictionaryData[i].type){
                    for(var b = 0; b < dictionaryData[i].children.length; b++){
                        if(this.controlList.id == dictionaryData[i].children[b].id){
                            this.dictionary = dictionaryData[i].children[b].operate
                        }
                    }
                }
            }
            for(var a = 0; a < this.dictionary.length; a++){
                if(this.controlList.value == this.dictionary[a].value){
                    this.name = this.controlList.idName
                }
            }
        }
    },
    mounted(){
        this.$nextTick(function() {
            this.$on('getKeyb', function() {
                this.keyC++
                this.value = ''
                this.value2 = ''
                this.value3 = ''
                this.name1 = ''
                this.name2 = ''
            });
            
            this.$on('getValue2', function() {
                this.value2 = this.controlList.value
                this.value3 = ''
                if(this.controlList.carryName == '自定义'){
                    this.value2 = ''
                }
                // 字典更新
                for(var i = 0; i < dictionaryData.length; i++){
                    if(this.controlList.devType == dictionaryData[i].type){
                        for(var b = 0; b < dictionaryData[i].children.length; b++){
                            if(this.controlList.id == dictionaryData[i].id){
                                this.dictionary = dictionaryData[i].operate
                            }
                        }
                    }
                }
                
            });
        });
    },
    methods: {
        save(val){
            this.keyC++
            var data  = []
            if(val==1){//保存
                if(this.controlList.valueName == '请选择'){
                    this.$notify({
                        title: '未选择设备',
                        type: 'warning',
                        duration: 1500
                    });
                }else{
                    if(this.controlList.devType == 'group'){
                        this.controlList.value = ''
                    }
                    data.push(val)
                    data.push(this.controlList)
                    this.$emit('childb', data);
                    this.value = ''
                    this.value2 = ''
                    this.name1 = ''
                    this.name2 = ''
                }
            }else if(val==0){//取消
                data.push(val)
                this.$emit('childb', data);  
                this.value = ''
                this.value2 = ''
                this.name1 = ''
                this.name2 = ''
            }
        },
        //输入操作值
        getValue(data){
            var n = 0
            this.controlList.value = data
            for(var i = 0; i < this.dictionary.length; i++){
                if(data == this.dictionary[i].value){
                    n++
                    this.controlList.carryName = this.dictionary[i].label+''+data
                    this.name = this.dictionary[i].label
                    this.value2 = this.dictionary[i].value
                    if(this.linkGroupTitle == '添加'){
                        this.name2 = this.controlList.carryName
                        this.controlList.name = this.name1 + this.name2
                    }
                    
                }
            }
            if(n == 0){ 
                this.value2 = ''
                this.name = '自定义'
                this.controlList.carryName = data
                if(this.linkGroupTitle == '添加'){
                    this.name2 = data.toString()
                    this.controlList.name = this.name1 + this.name2  
                }
                
            }
            this.value3 = ''
        },
        //选择字典
        getSelect(data){
            this.controlList.value = data
            for(var i = 0; i < this.dictionary.length; i++){
                if(data == this.dictionary[i].value){
                    this.name = this.dictionary[i].label
                    this.controlList.carryName = this.dictionary[i].label+''+data
                    if(this.linkGroupTitle == '添加'){
                        this.name2 = this.controlList.carryName
                        this.controlList.name = this.name1 + this.name2
                    }
                    
                }
            }
            this.linkDictionary = false
            this.value3 = ''
        },
        // 区分设备和自定义模块的编号
        itemChange(data){
            var pathvalue = this.$refs.modecascader.getCheckedNodes()[0].pathLabels;
            this.controlList.valueName = pathvalue.join("/")
            this.controlList.moduleName = pathvalue[0]
            if(data[0] == 'group'){
                this.controlList.devType = 0
                this.controlList.moduleType = "group"
                this.controlList.devUid = "0"
                this.controlList.devName = pathvalue[0]
                this.controlList.id = data[1]
                this.controlList.idName = pathvalue[1]
                if(this.linkGroupTitle == '添加'){
                    this.controlList.name = pathvalue[1] + this.name2
                    this.name1 = pathvalue[1]
                }
            }else{
                this.name = pathvalue[2]
                this.controlList.devType = data[0]
                this.controlList.moduleType = data[0].toString()
                this.controlList.devUid = data[1]
                this.controlList.devAddr = this.addr
                this.controlList.devName = pathvalue[1]
                this.controlList.id = data[2]
                this.controlList.idName = pathvalue[2]
                if(this.linkGroupTitle == '添加'){
                    this.controlList.name = pathvalue[1]+pathvalue[2] + this.name2
                    this.name1 = pathvalue[1]+pathvalue[2]
                }
                this.value2 = ''
                // 字典更新
                this.dictionary = []
                for(var i = 0; i < dictionaryData.length; i++){
                    if(this.controlList.devType == dictionaryData[i].type){
                        console.log(dictionaryData[i])
                        for(var b = 0; b < dictionaryData[i].children.length; b++){
                            if(this.controlList.id == dictionaryData[i].children[b].id){
                                this.dictionary = dictionaryData[i].children[b].operate
                            }
                        }
                    }
                }
                
            }
            this.value3 = ''
        },
        // 懒加载获取数据 
        lazyLoad(node,resolve){
            const level = node.level
            const type = node.path
            // console.log(type)
            // console.log(level)
            var unit = []
            let data
            // console.log(node)
            if(level > 0 && type[0] === 'group'){
                // 新增对最后一级的下一级的处理
                // 到最后一级的时候消除加载圈及禁止继续请求
                // console.log('选择功能模块')
                data = unit
                data.forEach(item => {
                    item.value = item.value
                    item.label = item.label
                    //将相关值赋值到选择器上
                    item.leaf = level >= 0
                })
                resolve(data)
            }else if(node.data == undefined){

            }else{
                this.addr = Number(node.data.addr)
                data = unit
                data.forEach(item => {
                    item.value = item.value
                    item.label = item.label
                    //将相关值赋值到选择器上
                    item.leaf = level >= 2
                })
                resolve(data)
                if (level >= 2) {
                    //接口获取
                    this.$http
                    .post(this.$baseUrl, {
                        "getdevinfo": [
                            {
                                "uid":type[1].toString(),
                                "type":Number(type[0]),
                                "addr":Number(node.data.addr)
                            }
                        ],
                        [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                    })
                    .then((res) => {
                        var itemData = res.data.getdevinfo[0].unit
                        for(var b = 0; b < itemData.length; b++){
                            if(itemData[b].ready == 1){
                                var reg = ''
                                if(itemData[b].id <= 34){
                                    reg = '(reg'+(itemData[b].id+2)+')'
                                }else if(itemData[b].id >= 35 && itemData[b].id <= 50){
                                    reg = '(reg37bit'+(itemData[b].id-35)+')'
                                }else if(itemData[b].id >= 51 && itemData[b].id <= 66){
                                    reg = '(reg38bit'+(itemData[b].id-51)+')'
                                }else if(itemData[b].id >= 67 && itemData[b].id <= 82){
                                    reg = '(reg39bit'+(itemData[b].id-67)+')'
                                }
                                var arr = {
                                    value:itemData[b].id,
                                    label:itemData[b].name+reg,
                                }
                                unit.push(arr)
                            }
                        }
                        data = unit
                        data.forEach(item => {
                            item.value = item.value
                            item.label = item.label
                            //将相关值赋值到选择器上
                            item.leaf = level >= 2
                        })
                        resolve(data)
                        // 新增对最后一级的下一级的处理
                        // 到最后一级的时候消除加载圈及禁止继续请求
                        if (level === 3) {
                            resolve(data)
                            return
                        }
                    })
                }
                
            } 
        }
    }
}
</script>

<style scoped>
/deep/ .el-dialog__header {
    background: rgba(0, 0, 0, 0.2);
    color: #fff !important;
}
/deep/ .el-form-item__label{
    color: #fff !important;
}
/deep/ .el-dialog__header .el-dialog__title {
    color: #fff !important;
}
.el-cascader{
    width: 100%;
}
.link_numput{
    width: 100%;
    display: flex;
}
.link_name{
    width: 100%;
}
.linkson_save{
    text-align: right;
}
.el-button{
    color: #fff;
}
.control_margin{
    margin-right: 10px;
}
.linkcontrol_help{
    margin-left: 10px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
}
.linkcontrol_help .el-button{
    cursor: pointer;
    background: rgba(119, 141, 161, 0.8);
}
</style>